<script setup lang="ts" name="LuckyGrid1">
import button from '@/assets/lottery/luckyGrid/luckyGrid1/button.png'
import img01 from '@/assets/lottery/luckyGrid/luckyGrid1/1.png'
import img02 from '@/assets/lottery/luckyGrid/luckyGrid1/2.png'
import img03 from '@/assets/lottery/luckyGrid/luckyGrid1/3.png'
import img04 from '@/assets/lottery/luckyGrid/luckyGrid1/4.png'
import img05 from '@/assets/lottery/luckyGrid/luckyGrid1/5.png'
import img06 from '@/assets/lottery/luckyGrid/luckyGrid1/6.png'
import img07 from '@/assets/lottery/luckyGrid/luckyGrid1/7.png'
import img08 from '@/assets/lottery/luckyGrid/luckyGrid1/8.png'
import { lottery } from '@/api/lottery'
const luckyGridRef = ref(null)

const initInfo = ref({
  prizes: [
    { x: 0, y: 0, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: '耳机一个', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img01, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 1, y: 0, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: 'ipad一个', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img02, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 2, y: 0, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: '谢谢参与', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img03, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 2, y: 1, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: 'AJ一双', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img04, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 2, y: 2, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: '神秘大礼', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img05, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 1, y: 2, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: '老婆一个', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img06, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 0, y: 2, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: 'iphone一台', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img07, top: 10, width: '2.4vw', height: '2.4vw' }] },
    { x: 0, y: 1, borderRadius: 10, shadow: '0px 5px 0px #9cd2ff', fonts: [{ text: 'PS5一个', top: '70%', fontSize: 14, fontColor: '#22b5ff' }], imgs: [{ src: img08, top: 10, width: '2.4vw', height: '2.4vw' }] }
  ],
  buttons: [
    { x: 1, y: 1, borderRadius: 10, background: 'rgba(255,255,255,0)', shadow: '', imgs: [{ src: button, top: 0, width: '100%', height: '100%' }] }
  ],
  defaultConfig: {
    gutter: 10
  },
  defaultStyle: {
    background: '#fff'
  },
  activeStyle: {
    fontColor: '#ff7252',
    background: '#fff29c',
    shadow: '0px 5px 0px #f4c076'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  luckyGridRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: 1 }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      luckyGridRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>九宫格-普通</span>
      </div>
    </template>
    <div class="lucky-grid-pane">
      <LuckyGrid
        ref="luckyGridRef"
        width="15.625vw"
        height="15.625vw"
        rows="3"
        cols="3"
        :defaultConfig="initInfo.defaultConfig"
        :defaultStyle="initInfo.defaultStyle"
        :activeStyle="initInfo.activeStyle"
        :prizes="initInfo.prizes"
        :buttons="initInfo.buttons"
        @start="startCallback"
        @end="endCallback"></LuckyGrid>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #22b5ff;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.lucky-grid-pane {
  width: 18.625vw;
  margin: 0 auto;
  padding: 1.4vw 1.4vw 2vw;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: changeBg 0.5s ease infinite;
}

@keyframes changeBg {
  0% {
    background-image: url("@/assets/lottery/luckyGrid/luckyGrid1/bg1.png");
  }

  100% {
    background-image: url("@/assets/lottery/luckyGrid/luckyGrid1/bg2.png");
  }
}
</style>
